<template>
    <div class="wrapper" :style="webStyle">
        <navigation-bar :title="'修改手机号码'" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <div class="formItem">
            <text class="icon-text">新的手机号 :</text>
            <input class="input" @input="onUserMobileChange" ref="mobile" placeholder="请输入新的手机号码" :value="mobile"/>
        </div>
        <div class="formItem">
            <input class="input" @input="onCodeChange" ref="confirmationCode" placeholder="请输入验证码"
                   :value="confirmationCode"/>
            <wxc-button :text="sendButtonText" type="red"
                        :disabled="disabled"
                        :textStyle="{color:'#00BB9A'}"
                        :btn-style="{width:'220px',marginBottom: '10px',height:'70px',borderRadius:'36px', backgroundColor: '#ffffff',
                             borderColor:'#00BB9A',borderStyle:'solid', borderWidth: '1px'}"
                        @wxcButtonClicked="SendCode"></wxc-button>
        </div>
        <div class="button-box">
            <wxc-button text="保存" type="red"
                        :btn-style="{flex:'1', width:'312px',marginTop: '20px', marginBottom:'20px', backgroundColor: '#00BB9A',borderRadius:'36px'}"
                        @wxcButtonClicked="saveChange"></wxc-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    @import '../config/styles.scss';

    .wrapper {
        background-color: $--container-color;
        width: 750px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .formItem {
        width: 750px;
        background-color: white;
        flex-direction: row;
        height: 100px;
        align-items: center;
    }

    .input {
        font-size: 30px;
        width: 520px;
        border-radius: 12px;
        padding: 20px;
        color: $--input-color;
        align-items: center;
        justify-content: center;
        border: 0px;
        outline: none;
    }

    .icon-text {
        color: #434A54;
        font-size: 30px;
        width: 220px;
        text-align: center;
    }

    .desc {
        color: #999999;
        font-size: 24px;
        margin-left: 24px;
        margin-top: 24px;
    }

    .button-box {
        position: absolute;
        bottom: 200px;
        left: 0;
        width: 750px;
        align-items: center;
        justify-content: center
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import { isEmptyString } from '../core/common/commonUtils'
  import { Utils, WxcCell, WxcButton } from 'weex-ui'
  import user from '../core/net/user'

  const modal = weex.requireModule('modal')
  export default {
    components: {
      NavigationBar,
      WxcCell,
      WxcButton,
    },
    data: () => {
      return {
        mobile: '',
        confirmationCode: '',
        disabled: false,
        sendButtonText: '发送验证码',
        mainStyle: {},
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      onUserMobileChange (event) {
        this.mobile = event.value
      },
      onCodeChange (event) {
        this.confirmationCode = event.value
      },
      SendCode () {
        let mobile = this.mobile
        if (this.disabled) {
          modal.toast({
            message: '请稍后再试',
          })
          return
        }
        if (isEmptyString(mobile)) {
          modal.toast({
            message: '手机号尚未填写',
          })
          return
        } else {
          this.$store.dispatch('sendCode', {
            mobile: mobile,
            resultCallback: (res) => {
              if (res.code === 200) {
                modal.toast({
                  message: '已发送',
                })
                this.disabled = true
                let timer = 60
                this.timeIntervalId = setInterval(() => {
                  if (timer > 0) {
                    this.sendButtonText = `( ${timer} )`
                    timer--
                  } else {
                    clearInterval(this.timeIntervalId)
                    $('#send-confirm').text('重新发送')
                    this.sendButtonText = `重新发送`
                    this.disabled = false
                  }
                }, 1000)
              }
            },
          })
        }
      },
      saveChange () {
        let confirmationCode = this.confirmationCode
        let mobile = this.mobile
        if (isEmptyString(mobile)) {
          modal.toast({
            message: '手机号不能为空',
          })
          return
        }
        if (isEmptyString(confirmationCode)) {
          modal.toast({message: '验证码不能为空'})
          return
        }
        user.updateUserMobile({mobile: this.mobile,'confirmation-code': confirmationCode}).then((res) => {
          if (res.result) {
            user.getUserInfoDao()
            this.toBack()
            modal.toast({
              message: '修改成功',
            })
          } else {
            modal.toast({
              message: '修改失败',
            })
          }
        })
      },
    },
    created () {
      this.mainStyle = getEntryPageStyle(Utils)
    },
  }
</script>
